<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getCommis } from '@/api/report'
	const instance = getCurrentInstance().proxy
	
	const user = useUserStore()
	const loading = ref(false)
	let info = {}
	const form = ref({
		applyCommis: []
	})
	
	function addHelper() {
		uni.navigateTo({
			url: '/pages/Organizers/declaration/banquet/helperSelect',
			success: (res) => {
				res.eventChannel.emit('select', uni.$uv.deepClone(form.value.applyCommis))
			},
			events: {
				selectHelper: (data) => {
					data.forEach(item => {
						let curItem = form.value.applyCommis.find(apply => apply.chefId === item.chefId)
						if(!curItem) {
							form.value.applyCommis.push(item)
						}
					})
				}
			}
		})
	}
	function viewCertificate(item) {
		loading.value = true
		getCommis(item.chefId).then(res => {
			let data = res.result || {}
			let urls = [data.health.furl, data.qualified.furl]
			uni.previewImage({
				urls
			})
			loading.value = false
		}).catch(() => loading.value = false)
		
	}
	function editHelper(item) {
		uni.navigateTo({
			url: '/pages/Organizers/declaration/banquet/helperAdd?id=' + item.chefId,
			events: {
				selectHelper: (data) => {
					let curIndex = form.value.applyCommis.findIndex(apply => apply.chefId === data.chefId)
					if(curIndex!= -1) form.value.applyCommis.splice(curIndex, 1, data)
				}
			}
		})
	}
	function deleteHelper(index) {
		form.value.applyCommis.splice(index, 1)
	}
	function next() {
		info.applyCommis = form.value.applyCommis.map(item => {
			return {
				name: item.assistName,
				phone: item.telephone,
				applyChefId: item.chefId
			}
		})
		uni.navigateTo({
			url: '/pages/Organizers/declaration/banquet/declareOther',
			success: (res) => {
				res.eventChannel.emit('info', info)
			}
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('info', form => {
			info = form || {}
		})
	})
</script>

<template>
	<view :class="['app-container', user.theme]">
		<view class="steps-box">
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/base_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>基础信息</text>
			</view>
			<view class="steps-line active"></view>
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/helper_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>帮厨信息</text>
			</view>
			<view class="steps-line"></view>
			<view class="steps-item">
				<view class="item-img">
					<uv-icon name="/static/images/declare/other.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>其他信息</text>
			</view>
		</view>
		<view class="app-content">
			<view class="add-box" @click="addHelper">
				<view class="operate-box">
					<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
				</view>
				<text>添加帮厨</text>
			</view>
			<uv-swipe-action>
				<view class="helper-box">
					<uv-swipe-action-item v-for="(item, index) in form.applyCommis" :key="item.chefId" :name="item.chefId">
						<view class="helper-item">
							<view class="item-left">
								<text class="item-name">{{item.assistName}}</text>
								<text class="item-phone">{{item.telephone}}</text>
							</view>
							<view class="item-right" @click="viewCertificate(item)">查看健康证</view>
						</view>
						<template v-slot:button>
							<view class="button-list">
								<view class="button-box" @click="editHelper(item)">
									<uv-icon name="edit-pen" color="#FFFFFF" size="32"></uv-icon>
								</view>
								<view class="button-box delete" @click="deleteHelper(index)">
									<uv-icon name="trash" color="#FFFFFF" size="32"></uv-icon>
								</view>
							</view>
						</template>
					</uv-swipe-action-item>
				</view>
			</uv-swipe-action>
		</view>
		<view class="app-bottom">
			<uv-button type="primary" shape="circle" text="下一步" :custom-style="{height: '84rpx'}" @click="next" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 164rpx;
		.steps-box{
			padding-top: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 40rpx;
			.steps-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8rpx;
				.item-img{
					width: 56rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #E9EAEE;
					border-radius: 50%;
					&.active{
						background-color: $uv-primary;
					}
				}
			}
			.steps-line{
				width: 64rpx;
				height: 4rpx;
				background-color: #D7D8D9;
				&.active{
					background-color: $uv-primary;
				}
			}
		}
		.app-content{
			.add-box{
				margin: 24rpx;
				padding: 24rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				.operate-box{
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $uv-primary;
				}
			}
			.helper-box{
				padding: 0 24rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				.helper-item{
					padding: 32rpx 32rpx 32rpx 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #FFFFFF;
					border-radius: 16rpx;
					overflow: hidden;
					.item-left{
						display: flex;
						align-items: center;
						gap: 16rpx;
						.item-name{
							font-weight: 600;
							font-size: var(--theme-lg);
							line-height: var(--theme-lg-line);
						}
						.item-phone{
							color: #626466;
						}
					}
					.item-right{
						padding: 8rpx 20rpx;
						border-radius: 52rpx;
						color: $uv-primary;
						background-color: rgba(62,133,214,0.1);
					}
				}
				.button-list{
					width: 160rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 28rpx;
				}
				.button-box{
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $uv-primary;
					&.delete{
						background-color: #F53F3F;
					}
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 100;
			height: 132rpx;
			padding: 24rpx 40rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
		&.large{
			.item-img{
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>